<template>
  <el-dialog :title="title" :visible.sync="visible" width="40%" append-to-body>
    <el-form ref="form" :model="formdata" :rules="rules" label-width="110px">
      <el-row>
        <!-- 这个弹窗组件 -->
        <el-col :span="24">
          <el-form-item label="用工部门" prop="deptId">
            <el-cascader
              v-model="formdata.deptId"
              :options="treeData"
              style="width: 100%"
              :props="{
                value: 'id',
                currentLabels: 'label',
                checkStrictly: true,
              }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="岗位名称" prop="postName">
            <el-input
              placeholder="请输入岗位名称"
              v-model.trim="formdata.postName"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="岗位描述" prop="postDesc">
            <el-input
              type="textarea"
              placeholder="请输入岗位描述"
              v-model.trim="formdata.postDesc"
              maxlength="20"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用工时长" prop="workHours">
            <!-- <el-input placeholder="请输入专业" v-model="formdata.specialityName" /> -->
            <el-input
              placeholder="请输入用工时长"
              v-model.trim="formdata.workHours"
              type="number"
              maxlength="10"
            >
              <template slot="append">小时</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用工薪酬" prop="postComp">
            <el-input
              v-model.trim="formdata.postComp"
              type="number"
              placeholder="请输入用工薪酬"
              maxlength="10"
            >
              <template slot="append">元/时</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="岗位需求人数" prop="postReqCount">
            <el-input
              placeholder="请输入人数"
              v-model.trim="formdata.postReqCount"
              type="number"
              maxlength="10"
            >
              <template slot="append">人</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="岗位起止时间" prop="dataTime">
            <el-date-picker
              v-model="dataTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="changeTime"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Validators from "@/utils/validate.js";
import { addDeptpost, updataDeptpost } from "@/api/worStudy/department";
import { number } from "echarts";
export default {
  name: "deptListAddDlg",
  props: {
    treeData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      title: "",
      visible: false,
      dataTime: [],
      formdata: {
        deptId: "",
        postDesc: "",
        workHours: null,
        postComp: 10,
        postReqCount: null,
        postName: "",
      },
      rules: {
        deptId: [{ required: true, message: "请选择", trigger: "change" }],
        postName: [
          {
            required: true,
            text: "请输入岗位名称",
            validator: Validators.isString,
            trigger: "blur",
          },
        ],
        postDesc: [
          {
            required: true,
            message: "请输入岗位描述",
            trigger: "blur",
          },
        ],
        workHours: [
          {
            required: true,
            message: "请输入用工时长",
            validator: Validators.NumberWor,
            trigger: "blur",
          },
        ],
        postComp: [
          {
            required: true,
            text: "请输入用工薪酬",
            validator: Validators.NumberWor,
            trigger: "blur",
          },
        ],
        postReqCount: [
          {
            required: true,
            text: "请输入岗位人数",
            validator: Validators.isNumber,
            trigger: "blur",
          },
        ],
      },
      type: "add",
    };
  },

  mounted() {
    // console.log(this.treeData,'treeData1111')
  },

  methods: {
    open(data, type) {
      console.log(this.treeData, type, "treeData1111");
      // console.log(data)
      this.type = type;
      if (type == "add") {
        this.title = "新增";
        this.formdata = {};
      } else if (type == "edit") {
        this.title = "修改";
        this.formdata = {
          ...data,
        };
      }
      this.visible = true;
    },
    // 下拉树选择
    handleChange(value) {
      this.formdata.deptId = value[value.length - 1];
    },
    changeTime() {
        this.formdata.startTime = this.dataTime[0];
      this.formdata.endTime = this.dataTime[1];
    },
    submitForm() {
      console.log(this.formdata, "SY3922");
      this.$refs["form"].validate((valid) => {
        console.log(valid);
        if (valid) {
          if (this.type == "edit") {
            this.formdata.deptName = " ";
            updataDeptpost(this.formdata).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.visible = false;
              this.$emit("updateList");
            });
          } else {
            addDeptpost(this.formdata).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.visible = false;
              this.$emit("updateList");
              this.formdata = {};
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>